<template>
	<view class="root">
		<!-- 头部 -->
		<view class="header">
			<view class="inputBox">
				<input type="text" disabled='true' placeholder="点击搜索" @tap="toSearch()">
			</view>
		</view>
		<!-- 轮播图 -->
		<view class="banner">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item>
					<view class="swiper-item">
						<image src="http://macro-oss.oss-cn-shenzhen.aliyuncs.com/mall/images/20181113/movie_ad.jpg" mode="aspectFit"></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<image src="http://macro-oss.oss-cn-shenzhen.aliyuncs.com/mall/images/20181113/movie_ad.jpg" mode="aspectFit"></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<image src="http://macro-oss.oss-cn-shenzhen.aliyuncs.com/mall/images/20181113/movie_ad.jpg" mode="aspectFit"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 4个item -->
		<view class="items">
			<view class="item" @tap="toIndex()">
				<uni-icon type="qq" size="30"></uni-icon>
				<text>首页</text>
			</view>
			<view class="item" @tap="toCategory()">
				<uni-icon type="weibo" size="30"></uni-icon>
				<text>分类</text>
			</view>
			<view class="item" @tap="toCart()">
				<uni-icon type="weixin" size="30"></uni-icon>
				<text>购物车</text>
			</view>
			<view class="item" @tap="toMy()">
				<uni-icon type="chat" size="30"></uni-icon>
				<text>我的</text>
			</view>
		</view>
		<!-- 滚动公告 -->
		<!-- <view class="announce">
			<uni-icon class="icon" type="chatboxes"></uni-icon>
			<swiper :autoplay="true" :interval="5000" :duration="1000">
				<swiper-item>
					<view class="swiper-item">这是第一条公告</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">这是第二条公告</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">这是第三条公告</view>
				</swiper-item>
			</swiper>
		</view>
 -->
		<!-- 商品列表 -->
		<view class="page">
			<view class="uni-product-list">
				<view class="uni-product" v-for="goods in goodsLists" :key="goods.goods_id" @click="toDetail(goods.goods_id, goods.class_id)">
					<view class="image-view">
						<image v-if="goods.goods_thumbnail_image" class="uni-product-image" :src="goods.goods_thumbnail_image"></image>
					</view>
					<view class="uni-product-title">{{goods.goods_name}}</view>
					<view class="uni-product-price">
						<text class="uni-product-price-favour">￥{{goods.goods_shop_price}}</text>
						<text class="uni-product-price-original">￥{{goods.goods_price}}</text>
						<text class="uni-product-tip">自营</text>
					</view>
				</view>
			</view>
		</view>
	</view>


</template>

<script>
	import uniIcon from "../../../components/uni-icon.vue"
	import {
		getGoodsList
	} from '../../../common/api.js'
	export default {
		components: {
			uniIcon
		},
		data() {
			return {
				goodsLists: [] // 商品列表
			}
		},
		methods: {
			goodsList() {
				let reqData = {
					class_id: 1
				}
				getGoodsList(reqData).then(res => {
					let resData = res.data
					this.goodsLists = resData.result
				})
			},
			toDetail(goods_id, class_id) {
				uni.navigateTo({
					url: '../../goodsDetail?goods_id=' + goods_id + '&class_id=' + class_id
				});
			},
			toSearch() {
				uni.navigateTo({
					url: '../../HM-search'
				})
			},
			toIndex(){
				uni.switchTab({
					url: './index'
				})
			},
			toCategory(){
				uni.switchTab({
					url: '../category/category'
				})
			},
			toCart(){
				uni.switchTab({
					url: '../cart/cart'
				})
			},
			toMy(){
				uni.switchTab({
					url: '../my/my'
				})
			}
			
		},

		onLoad() {

		},
		onShow() {
			this.goodsList()
		}
	}
</script>

<style>
	.root {
		background: rgb(248, 248, 248);
	}

	.header {
		width: 95%;
		background-color: rgb(242, 242, 242);
		padding: 7.5px 2.5%;
		display: flex;
		justify-content: center;
	}

	.header .inputBox {
		width: 85%;
		flex-shrink: 1;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.banner {
		margin: 20upx auto 0;
	}

	.header .inputBox>input {
		width: 100%;
		height: 30px;
		font-size: 16px;
		border: 0;
		border-radius: 30px;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		padding: 0 3%;
		margin: 0;
		background-color: #ffffff;
	}

	.banner image {
		display: block;
		width: 100%;
		height: 307.5upx;
		border-radius: 10upx;
	}

	.items {
		margin-top: 40upx;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
	}

	.item {
		display: flex;
		flex-direction: column;
	}

	/* .announce {
		position: relative;
		margin-top: 20upx;
		height: 60upx;
	}

	.announce .uni-icon {
		position: absolute;
		top: 50%;
		margin-top: -24upx;
		left: 40upx;
	}

	.announce swiper {
		position: absolute;
		left: 120upx;
		top: 0;
		width: 100%;
		height: 60upx;
	}

	.announce swiper,
	.announce swiper swiper-item {
		height: 100%;
	} */
</style>
